<!DOCTYPE HTML>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">

  <link href="https://cdn.wangyabin.top/Extension/json-editer/jsoneditor.css" rel="stylesheet" type="text/css">
  <script src="https://cdn.wangyabin.top/Extension/json-editer/jsoneditor.js"></script>

  <style type="text/css">
    body,
    html {
      margin: 0;
      padding: 0;
    }

    code {
      background-color: #f5f5f5;
    }

    #jsoneditor {
      width: 100vw;
      height: 100vh;
    }
  </style>
</head>

<body>

  <form>
    <div id="jsoneditor"></div>
  </form>

  <script>
    const container = document.getElementById('jsoneditor')

    const options = {
      mode: 'code',
      modes: ['code', 'form', 'text', 'tree', 'view', 'preview'], // allowed modes
      name: "JSON",
      onError: function (err) {
        alert(err.toString())
      },
      onEvent: function (node, event) {
        if (event.type === 'click') {
          let message = 'click on <' + node.field +
            '> under path <' + node.path +
            '> with pretty path: <' + prettyPrintPath(node.path) + '>'
          if (node.value) {
            message += ' with value <' + node.value + '>'
          }
          console.log(message)
        }
        function prettyPrintPath(path) {
          let str = ''
          for (let i = 0; i < path.length; i++) {
            const element = path[i]
            if (typeof element === 'number') {
              str += '[' + element + ']'
            } else {
              if (str.length > 0) str += ','
              str += element
            }
          }
          return str
        }
      }
    }

    window.editor = new JSONEditor(container, options, {})

    // 获取参数
    const search = location.search
    const ps = search.split('?')
    if (ps.length === 2) {
      const idArr = ps[1].split('=')
      if (idArr.length === 2 && idArr[1].length === 24) {
        const ajax = new XMLHttpRequest("Msxml2.XMLHTTP");
        ajax.open("get", `/webnuxt-api/api/cache-data/${idArr[1]}`, true);
        ajax.setRequestHeader("Content-Type", "application/json;charset=utf-8");
        ajax.onreadystatechange = function () {
          if (ajax.readyState == 4) {
            if (ajax.status == 200) {
              var response = JSON.parse(ajax.responseText)
              var data = response.data
              if (data) {
                try {
                  const jsonData = JSON.parse(data)
                  window.editor.set(JSON.parse(data))
                } catch {
                  window.editor.set('JSON解析失败')
                }
              } else {
                window.editor.set('数据没查到，可能是数据已过期(数据缓存时间是1天)')
              }
            }
          }
        }
        ajax.send(null);
      }
    }



  </script>
</body>

</html>